import {Text, View, ScrollView, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import Search from './components/search';
import Tab from './components/tab';
import {store2Props} from './selectors';
import api from 'api';
import dayjs from 'dayjs';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/none.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      down: false,
    };
  }

  componentDidMount() {
    this.props.actions.init();
  }
  componentWillUnmount() {
    this.props.actions.clean();
  }
  componentDidShow(): void {}
  async _refresh() {
    const {
      actions: {action},
      main: {searchParams},
    } = this.props;
    let {down} = this.state;
    this.setState({
      down: true,
    });
    if (down) return;
    action.commonChange('main.searchParams', {
      pageNum: 1,
      pageSize: 10,
      orderNo: searchParams.orderNo,
      status: searchParams.status,
    });
    try {
      await action.page(true);
    } finally {
      this.setState({
        down: false,
      });
    }
  }
  nextPage() {
    const {
      actions: {action},
      main: {searchParams, status},
    } = this.props;
    if (status !== 'ready') return;
    const pageNum = searchParams.pageNum + 1;
    action.commonChange('main.searchParams.pageNum', pageNum);
    action.commonChange('main.status', 'loading');
    action.page();
  }

  render() {
    const {
      main: {list, status},
    } = this.props;
    return (
      <View className="CinemaTickerOrders">
        <Search />
        <Tab />
        <ScrollView
          refresher-enabled
          refresher-background="#f7f6f6"
          refresher-triggered={this.state.down}
          className="CinemaTickerOrders-Scroll"
          scrollY
          onScrollToLower={() => this.nextPage()}
          onRefresherRefresh={() => this._refresh()}
        >
          {list.map((e) => {
            const [cinemaName, office, language, time, money, movieTitle, filmCover, local, city] = e.info;
            let payprice = e.payprice ? e.payprice : undefined;
            let price = e.price ? e.price : undefined;
            if (!payprice) {
              payprice = price;
              price = undefined;
            }
            return (
              <View className="CinemaTickerOrder" key={e.id}>
                <View className="CinemaTickerOrder-head">
                  <Text className="CinemaTickerOrder-orderId">订单号:{e.orderid}</Text>
                  <Text className="CinemaTickerOrder-time">{dayjs(e.createdtime).format('YYYY-MM-DD HH:mm:ss')}</Text>
                </View>
                <View className="CinemaTickerOrder-body">
                  <Image className="CinemaTickerOrder-image" mode="widthFix" src={filmCover}></Image>
                  <View style={{flex: 1}}>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        marginBottom: '16rpx',
                      }}
                    >
                      <Text className="CinemaTickerOrder-title">{movieTitle}</Text>
                      <Text className="CinemaTickerOrder-num">x{e.ordernum}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
                      <View>
                        <Text className="CinemaTickerOrder-text">
                          {office}/{language}
                        </Text>
                        <Text className="CinemaTickerOrder-text">{time}</Text>
                        <Text className="CinemaTickerOrder-text">{e.seat.join(' ')}</Text>
                      </View>
                      <View>
                        <Text className="CinemaTickerOrder-price">¥{payprice}</Text>
                        {price && <Text className="CinemaTickerOrder-linePrice">¥{price}</Text>}
                      </View>
                    </View>
                    <View className="CinemaTickerOrder-local">{cinemaName}</View>
                  </View>
                </View>
              </View>
            );
          })}
          {['loading', 'end'].includes(status) && (
            <View className="noneText">{status === 'loading' ? '加载中' : status === 'end' ? '已经到底啦~' : ''}</View>
          )}
        </ScrollView>
        {status === 'none' && list.length <= 0 && (
          <View className="zeroList">
            <Blank
              content="您还没有订单信息哦~"
              img={notdataImg}
              imgStyle={{width: '400rpx', height: '400rpx'}}
              textStyle={{
                fontSize: '32rpx',
                color: '#999999',
                textAlign: 'center',
                marginTop: '40rpx',
              }}
            />
          </View>
        )}
      </View>
    );
  }
}
